<template>
	<view style="display: flex;flex-direction: column;height: 100%;">

		<van-tabs v-model:active="type" @click-tab="onClickTab">
			<van-tab title="打卡" name="0"></van-tab>
			<van-tab title="上下班打卡" name="1"></van-tab>
			<van-tab title="外勤打卡" name="2"></van-tab>
			<van-tab title="未打卡" name="3"></van-tab>
			<van-tab title="请假" name="4"></van-tab>
			<van-tab title="旷工" name="5"></van-tab>
			<van-tab title="休息" name="6"></van-tab>
			<van-tab title="未排班" name="7"></van-tab>
			<van-tab title="迟到" name="8"></van-tab>
			<van-tab title="早退" name="9"></van-tab>
			<van-tab title="漏签" name="10"></van-tab>
			<van-tab title="出差" name="11"></van-tab>
			<van-tab title="外出" name="12"></van-tab>
			<van-tab title="加班" name="13"></van-tab>
		</van-tabs>
		<van-list style="min-height: 100vh;padding: 50rpx;background-color: #f3f7fe;" v-model:loading="loading"
			:finished="finished" finished-text="没有更多了" @load="onLoad2">
			<navigator  v-for="item in list"  :key="item" :url="'/pages/AttendForPerson/AttendForPerson?lx='+lx+'&userId='+item.id+'&startDate='+startDate+'&endDate='+endDate+'&scope='+type" class="item">
				<div style="display: flex;align-items: center;">
					<div
						style="background-color: rgb(85, 177, 249); padding: 3rpx; width: 70rpx; height: 70rpx; color: rgb(255, 255, 255); display: flex; justify-content: center; align-items: center; border-radius: 10rpx;">
						{{this.getName(item.lastname)}}
					</div>
					<div style="display: flex; flex-direction: column; justify-content: center; margin-left: 20rpx;">
						<span style="margin-bottom: 5px;">{{item.lastname}}</span>
						<span style="font-size: 12px;color: rgb(153, 153, 153);">{{item.department}}</span>
					</div>
				</div>
				<div style="display: flex; flex-direction: column; color: rgb(153, 153, 153); justify-content: center;">
					
				</div>
			</navigator>
		</van-list>
		
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	export default {
		data() {
			return {
                 lx:1,
				 startDate:null,
				 endDate:null,
				 type:'0',
				 departId:null
			}
		},
		created(){
			this.lx = this.$route.query.lx
			this.startDate = this.$route.query.startDate
			this.endDate = this.$route.query.endDate
			if(this.$route.query.type !=undefined){
				this.type =this.$route.query.type
			}
			this.departId = this.$route.query.departId
		},
		computed: {


			getName() {

				return (lastname) => {
					return lastname ? lastname.substring(0, 2) : ''
				}
			}

		},

		methods: {
			
			getData(){
				this.loading = true
				this.onLoad2()
			},
			
         
			onLoad2() {
				const startDate = this.$route.query.startDate
				const endDate = this.$route.query.endDate
				const departId = this.$route.query.departId
				
				uni.request({
					url: '/mobile/heo/KqReport.jsp',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						startDate: startDate,
						endDate: endDate,
						departId:departId,
						type:this.type,
						lx:this.lx
					},
					success: (res) => {
						const result = res.data;
						if (result.ret == '0') {
							this.list = result.data
							
						}
						this.loading = false
						this.finished = true

					}

				})


			},
			onClickTab({name}){
				this.type = name
				 this.getData()
				
			}
		},
		setup() {
			const activeName = ref('0');
			const list = ref([]);
			const showList = ref({})
			const loading = ref(false);
			const finished = ref(false);

			 

			return {
				activeName,
				list,
				loading,
				finished,
				showList
			};
		},

	}
</script>

<style scoped>
	.item {

		background-color: #fff;
		padding: 40rpx;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
</style>
